<template>
  <div class="add-copy">
    <el-drawer v-model="drawerAddCopy" title="添加复制" size="30%" :before-close="close">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="90px"
        label-position="left"
        class="w-90%"
      >
        <el-form-item label="部门" prop="deptId">
          <el-tree-select
            v-model="formData.deptId"
            :data="deptList"
            :props="defaultProps"
            check-strictly
            node-key="id"
            placeholder="请选择部门"
            @change="treeSelectChange"
            clearable
          />
        </el-form-item>
        <el-form-item label="人员" prop="userId">
          <el-select v-model="formData.userId" placeholder="请选择">
            <template v-for="item in userList" :key="item.value">
              <el-option :label="item.label" :value="item.value" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="网站名称" prop="webName">
          <el-input v-model="formData.webName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="网站域名" prop="domain">
          <el-input v-model="formData.domain" placeholder="请输入域名" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer el-dia-btn">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" color="#3721FF" @click="submit">保存</el-button>
        </span>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { getDeptList, getUserList } from '@/utils/index'
import { defaultProps, handleTree } from '@/utils/tree'
import { WebSiteApi, WebSiteVO } from '@/api/website/website'

const formRef = ref()
const drawerAddCopy = ref(true)
const formData = ref({
  deptId: '',
  userId: '',
  webName: '',
  domain: '',
  sourceWebsiteId: ''
})
const deptList = ref()
const userList = ref()
const rules = {
  deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
  userId: [{ required: true, message: '请选择人员', trigger: 'change' }],
  webName: [{ required: true, message: '请输入网站名称', trigger: 'blur' }],
  domain: [{ required: true, message: '请输入网站域名', trigger: 'blur' }]
}
const props = defineProps<{
  isAddCopy: boolean
  copyId: number | string
}>()
const emit = defineEmits(['close', 'refreshList'])
//获取部门列表
const treeSelectChange = async (val) => {
  userList.value = await getUserList(val)
  console.log(userList.value)
}
// 提交
const submit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      formData.value.sourceWebsiteId = props.copyId
      WebSiteApi.copyWebSite(formData.value).then((res) => {
        // if (res.code === 200) {
        ElMessage.success('复制成功')
        emit('refreshList')
        close()
        // }
      })
    }
  })
}
const close = () => {
  emit('close')
}
watch(
  () => props.isAddCopy,
  (val) => {
    drawerAddCopy.value = val
  }
)
watch(drawerAddCopy, (val) => {
  if (!val) {
    emit('close')
  }
})
onMounted(async () => {
  deptList.value = await getDeptList()
})
</script>

<style scoped>
@import '@/styles/website.scss';
</style>
